<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="textName" />
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody :list="list" @clearData="clearData">
        <!-- 父组件给子组件传数据 -->
        <HmYiliao
          v-for="item in fullname"
          :key="item.uname"
          :id="id"
          :date="item.date"
          :uname="item.uname"
          :end="item.end"
          :banner="item.banner"
          :nav="item.nav"
        ></HmYiliao>
        <HmData> </HmData>
      </tbody>
    </table>
  </div>
</template>
<script>
// 引入子组件
import HmYiliao from './components/HmYiliao.vue'
import HmData from './components/HmData.vue'

export default {
  components: {
    HmYiliao,
    HmData,
  },
  data() {
    return {
      flag:false,
      list: [
        {
          id: '1',
          date: '2020-6-5',
          uname: '张三',
          end: '发烧',
          banner: '布洛芬',
          nav: '详情',
        },
        {
          id: '2',
          date: '2028-7-9',
          uname: '李四',
          end: '感冒',
          banner: '感冒灵',
          nav: '详情',
        },
        {
          id: '3',
          date: '2020-6-5',
          uname: '王五',
          end: '腰间盘突出',
          banner: '中药',
          nav: '详情',
        },
      ],
      textName: '',
    }
  },
  methods: {
    clearData(id){
      this.list=this.list.filter(item=>item.id===id)
    }
  },
  computed: {
    fullname() {
      return this.list.filter((item) => {
        if (item.uname === this.textName) {
          return item
        } else if (item.date === this.textName) {
          return item
        } else if (item.end === this.textName) {
          return item
        } else if (item.banner === this.textName) {
          return item
        } else if (this.textName === '') {
          return this.list
        }
      })
    },
  },
}
</script>

<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>
